<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M782.1312 1022.7712H232.3456c-59.1872 0-106.9056-47.7184-106.9056-106.9056V111.5136C125.44 52.3264 173.1584 4.608 232.3456 4.608h549.7856c59.1872 0 106.9056 47.7184 106.9056 106.9056v804.3008c0 59.2384-47.7184 106.9568-106.9056 106.9568zM232.3456 68.2496c-24.1664 0-43.264 19.0976-43.264 43.264v804.3008c0 24.1664 19.0976 43.264 43.264 43.264h549.7856c24.1664 0 43.264-19.0976 43.264-43.264V111.5136c0-24.1664-19.0976-43.264-43.264-43.264H232.3456z m0 0' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M539.0848 831.8464H467.1488c-17.8176 0-31.7952-13.9776-31.7952-31.7952s13.9776-31.7952 31.7952-31.7952h71.8848c17.8176 0 31.7952 13.9776 31.7952 31.7952s-13.9264 31.7952-31.744 31.7952z m0 0M672.3072 200.96h-329.216c-17.152 0-31.1296-14.0288-31.1296-31.1296v-4.6592c0-17.152 14.0288-31.1296 31.1296-31.1296h329.216c17.152 0 31.1296 14.0288 31.1296 31.1296v4.6592c0 17.1008-14.0288 31.1296-31.1296 31.1296z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
